<template>
    <div class="busiInfoQuery" v-loading="loading">
        <searchForm class="search-form" :searchFormConfig="searchFormConfig" @search="onClickSearch"
            @clear="onClickClear" />
        <plainTable :tableData="tableData" :tableConfigData="tableConfigData" @changeStar="onClickChangeStar"
            @toUpdateCost="toUpdateCost" @checkSource="checkSource" @checkDetail="checkDetail" :pageInfo="pageInfo"
            @prevPage="handlePrevPage" @nextPage="handleNextPage" />
        <editStarPopup ref="editStarPopupRef" />
        <el-dialog v-model="updateCostDialogVisible" width="80%" class="my-dialog">
            <plainTable :tableData="tableData2" :tableConfigData="tableConfigData2"
                @confirmUpdateCost="confirmUpdateCost" @updateTotal="updateTotal" />
        </el-dialog>
    </div>
</template>

<script setup>
import { ref } from "vue";
import plainTable from "@/components/plainTable.vue";
import searchForm from "@/components/searchForm.vue";
import editStarPopup from '@/components/editStarPopup.vue';
import { useBusiInfoQuery } from "@/hooks/index";
import { reqModifyUserLevel, reqModifyUserCost } from "@/api/index";
import { ElMessage } from "element-plus";
import { useUserStore } from "@/store/index";
import { useRouter } from "vue-router";

const { initData, loading, tableData, tableConfigData, searchFormConfig,pageInfo,prevPage,nextPage } = useBusiInfoQuery();

const editStarPopupRef = ref(null);
const userStore = useUserStore();

const checkSource = (row) => {
    console.log("checkSource", row);
    // tableData2.value = [];
    // updateCostDialogVisible.value = true;
    router.push({
        name: 'sourceApplyApproval',
        params: {
            id: row.user_id
        }
    });
}
const router = useRouter();
const checkDetail = (row) => {
    router.push({
        name: 'merchantInfoUpdate',
        params: {
            id: row.user_id
        }
    });
}

const onClickChangeStar = (row) => {
    clog("行数据：", row);
    editStarPopupRef.value.showDialog({
        ouser_id: userStore.ouser_id,
        user_id: row.merchantId,
        level: row.merchantLevel
    }, reqModifyUserLevel, () => {
        initData({
            page: "1"
        });
    });
}

const onClickSearch = (form) => {
    initData({
        company_name: form.companyName,
        mail: form.email,
        page: "1",
        level: form.merchantLevel,
        user_id: form.busiId
    });
}

const onClickClear = () => {
    initData({
        page: "1"
    });
}

const toUpdateCost = (info) => {
    console.log("toUpdateCost", info);
    tableData2.value = [{
        ...info,
        busiId: info.merchantId,
        country: info.license_code,
        currency: '',
        type: '',
        payMethod: '',
        constantCost: '0',
        priceRate: '0',
        priceValue: `0+0%`,
        getMethod: '',
        status: '',
    }];
    updateCostDialogVisible.value = true;
}
const confirmUpdateCost = async (info) => {
    console.log("confirmUpdateCost", info);
    loading.value = true;
    try {
        const res = await reqModifyUserCost({
            ouser_id: userStore.ouser_id,
            ucid: info.ucid,
            rate: info.priceRate,
            cost: info.constantCost
        });
        clog("更新费用返回值：", res);
        loading.value = false;
        ElMessage.success('更新成功!');
        updateCostDialogVisible.value = false;
        initData({
            page: "1"
        });
    } catch (err) {
        loading.value = false;
        ElMessage.error('更新失败!');
    }
}
const updateTotal = (info) => {
    const tmpPriceValue = `${info.constantCost}+${info.priceRate}%`;
    tableData2.value[0].priceValue = tmpPriceValue;
    console.log("updateTotal", tableData2.value);
}
const updateCostDialogVisible = ref(false);
const tableData2 = ref([]);
const tableConfigData2 = ref([
    {
        prop: "busiId",
        label: "商戶號",
    },
    {
        prop: "country",
        label: "國別",
    },
    {
        prop: "currency",
        label: "貨幣",
    },
    {
        prop: "type",
        label: "类别",
    },
    {
        prop: "payMethod",
        label: "支付方式",
    },
    {
        prop: "constantCost",
        label: "固定費用",
    },
    {
        prop: "priceRate",
        label: "費率",
    },
    {
        prop: "priceValue",
        label: "費用",
    },
    {
        prop: "getMethod",
        label: "結算天数",
    },
    {
        prop: "status",
        label: "狀態",
    },
    {
        prop: "confirmCostUpdate",
        label: "操作",
    },
    // {
    //     prop: "remark",
    //     label: "備註",
    // },
]);
const handlePrevPage = () => {
    prevPage();
}

const handleNextPage = () => {
    nextPage();
}
</script>
<style scoped lang="scss">
:deep(.my-dialog) {
    .plain-table {
        box-shadow: unset;
    }
}
</style>